<template>
  <div class="chinaecharts">
    <header class="top title_box">
      <my-header></my-header>
    </header>
    <div class="bottom">
      <div class="line_chart">
        <my-aside :views="views" :dayCount="dayCount" :count="count"></my-aside>
      </div>
      <div id="mapChart" ref="mapChart"></div>
    </div>
  </div>
</template>
<script>
import MyHeader from "./component/header"
import MyAside from "./component/asider"

import request from "../../api/request"
export default {
  name: "ChinaEcharts",
  data() {
    return {
      count: 0,
      dayCount: 0,
      views: [],
      myAddress: [],
    }
  },
  components: {
    MyHeader,
    MyAside,
  },
  watch: {
    myAddress: function(newVal, oldVal) {
      this.mapFn()
    },
  },
  async created() {
    this.$store.commit("updatePath", "/statistical")
    let res = await request({
      url: "/access/obtain",
      data: {},
      method: "get",
    })
    let { count, address, views } = res
    this.count = count
    for (var key in address) {
      if (address[key] > 0) {
        this.myAddress.push({
          name: key,
          value: address[key],
        })
      }
    }
    this.views = views
    this.dayCount = views[views.length - 1].number
  },
  methods: {
    mapFn() {
      // 基于准备好的dom，初始化echarts实例
      var mapChart = echarts.init(document.getElementById("mapChart"))
      var mapIcons = {
        sign: "/images/sign.png",
        bg: "/images/bg.png",
      }
      // 全国省份列表
      var geoCoordMap = {
        台湾: [121.509062, 25.044332],
        河北: [114.502461, 38.045474],
        山西: [112.549248, 37.857014],
        内蒙古: [111.670801, 40.818311],
        辽宁: [123.429096, 41.796767],
        吉林: [125.3245, 43.886841],
        黑龙江: [126.642464, 45.756967],
        江苏: [118.767413, 32.041544],
        浙江: [120.153576, 30.287459],
        安徽: [117.283042, 31.86119],
        福建: [119.306239, 26.075302],
        江西: [115.892151, 28.676493],
        山东: [117.000923, 36.675807],
        河南: [113.665412, 34.757975],
        湖北: [114.298572, 30.584355],
        湖南: [112.982279, 28.19409],
        广东: [113.280637, 23.125178],
        广西: [108.320004, 22.82402],
        海南: [110.33119, 20.031971],
        四川: [104.065735, 30.659462],
        贵州: [106.713478, 26.578343],
        云南: [102.712251, 25.040609],
        西藏: [91.132212, 29.660361],
        陕西: [108.948024, 34.263161],
        甘肃: [103.823557, 36.058039],
        青海: [101.778916, 36.623178],
        宁夏: [106.278179, 38.46637],
        新疆: [87.617733, 43.792818],
        北京: [116.405285, 39.904989],
        天津: [117.190182, 39.125596],
        上海: [121.472644, 31.231706],
        重庆: [106.504962, 29.533155],
        香港: [114.173355, 22.320048],
        澳门: [113.54909, 22.198951],
      }
      var markPointData = [
        // {
        //   name: "广东",
        //   coord: [113.280637, 23.125178],
        //   runConut: "537",
        //   num: "234",
        // },
      ]

      function randomData() {
        return Math.round(Math.random() * 500)
      }
      var dataMap = this.myAddress
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push(geoCoord.concat(data[i].value))
          }
        }
        return res
      }

      var option = {
        backgroundColor: {
          type: "radial",
          x: 0.5,
          y: 0.5,
          r: 0.55,
          colorStops: [
            {
              offset: 0,
              color: "#153C5B",
            },
            {
              offset: 1,
              color: "#0D2436",
            },
          ],
          global: false,
        },
        animation: true,
        progressiveThreshold: 3,
        legend: {
          left: "left",
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: "{b}",
          triggerOn: "mousemove",
          backgroundColor: "#eee",
          borderColor: "#464849",
          borderWidth: "1",
          padding: [5, 10],
          textStyle: {
            color: "#000000",
            fontSize: "16",
            fontFamily: "Microsoft YaHei",
            fontWeight: "bold",
          },
        },
        grid: {},
        geo: {
          map: "china",
          //"center": [0, 12],
          aspectScale: 0.8,
          roam: true,
          scaleLimit: {
            min: 1.2,
            max: 15,
          },

          zoom: 1.2,

          label: {
            //标签样式设置

            normal: {
              show: true,
              formatter: function(params) {
                for (var i = 0; i < dataMap.length; i++) {
                  if (params.name == dataMap[i].name) {
                    //return "{div|\n{fontName|"+params.name+"}{fontVal|"+dataMap[i].value+"}\n{sign|}"

                    return (
                      "{div|" +
                      params.name +
                      "}\n{fontVal|" +
                      dataMap[i].value +
                      "}\n{sign|}"
                    )
                  }
                }
                return params.name
              },
              /*backgroundColor: {
					image: './static/img/bg.png'
				},*/
              color: "#FFFFFF",
              verticalAlign: "bottom",
              rich: {
                value: { fontsize: 20 },
                fontName: {
                  shadowOffsetX: -1,
                  color: "#57F7FE",
                  fontSize: 10,
                },
                fontVal: {
                  height: 10,
                  color: "#ffffff",
                  fontSize: 14,
                  fontWeight: 900,
                  padding: [10, 3, 0, 0],
                },
                div: {
                  height: 25,
                  fontSize: 12,
                  lineHeight: 8,
                  //疑似 下 右 上 左
                  padding: [15, 3, 3, 0],
                  color: "#57F7FE",
                  backgroundColor: { image: mapIcons.bg },
                },
                sign: {
                  position: "absolute",
                  height: 30,
                  color: "#ffffff",
                  backgroundColor: { image: mapIcons.sign },
                },
              },
            },
            emphasis: {
              //鼠标移上去的样式
              show: true,
              //"fontSize": "16",
              color: "#FFFFFF",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .5)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -5,
              shadowOffsetY: 12,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "可以使用鼠标拖动，缩放",
            type: "heatmap",
            coordinateSystem: "geo",

            data: convertData(dataMap),

            markPoint: {
              //标记点
              // "symbol": 'path://M512 39.384615l169.353846 295.384615 342.646154 63.015385-240.246154 248.123077L827.076923 984.615385l-315.076923-145.723077L196.923077 984.615385l43.323077-334.769231L0 401.723077l342.646154-63.015385L512 39.384615',
              //"symbolSize": 14, //图形大小
              label: {
                normal: {
                  formatter: function(params) {
                    return params.name
                  },
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(72,150,128,1)",
                },
              },
              data: markPointData,
            },
          },
        ],
        visualMap: [
          {
            show: true,
            left: "10%",
            bottom: "5%",
            max: 500,
            min: 0,
            z: 999,
            calculable: false,
            text: ["高", "低"],
            inRange: {
              color: ["#0033FF", "#FFFF00", "#FF3333"],
            },
            textStyle: {
              color: "#fff",
            },
            seriesIndex: 0,
          },
        ],
      }

      mapChart.setOption(option)
      window.addEventListener("resize", () => {
        // 自动渲染echarts
        mapChart.resize()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.chinaecharts {
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 600px;
  background: #0d2436;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  .top {
    height: 60px;
    width: 100%;
  }
  .bottom {
    height: calc(100% - 85px);
    width: 100%;
    display: flex;
    .line_chart {
      width: 500px;
      height: 100%;
      box-sizing: border-box;
      padding: 0px 10px;
    }
    #mapChart {
      width: calc(100% - 500px);
      height: 100%;
    }
  }
}
</style>
